<h1><?php echo $this->escape($this->item['title']);?></h1>

<?php echo $this->render('gallery/top');?>

<div class="content-node-item"><?php echo $this->escape($this->item);?></div>
<form id="reorderform" action="<?php echo $this->url(array('module' => 'gallery', 'controller' => 'gallery', 'action' => 'performReorder', 'id' => $this->item['id']), 'default', true);?>" onsubmit="return false;">
<input type="hidden" name="id" value="<?php echo $this->item['id'];?>" />
<div id="gallery:::gallery-thumbs:::" class="flc-imageReorderer">
<?php
if ($this->item->hooks['gallery_nodes']) {
    $i = 0;
    foreach ($this->item->hooks['gallery_nodes'] as $image) {?>
    	<?php if (($i % 4) == 0) {echo '<br class="clear" />';} ?>
        <div class="content-item filemanager_file_list" id="gallery:::gallery-thumbs:::image:<?php echo $image->id;?>">
            <div>
		          <div class="fl-reorderer-image-inner-container">
		          	<a href="<?php echo $image->hooks['filemanager_file']->getUrl();?>" 
		          	   title="<?php echo $image['content'] ? $this->escape($image->content) : "*"; ?>"
		          	   onclick="editDialog(<?php echo $image->id;?>); return false;">
		                <img src="<?php echo $image->hooks['filemanager_file']->getUrl(135, 135);?>"
		                     alt="<?php echo $this->translate('Image: ').$image['title'];?>" />
		            </a>
		            	
		          </div>
		          <div class="flc-reorderer-imageTitle fl-reorderer-imageTitle">
		            <?php echo $image['title'];?>
		            <img class="gallery-remove-image" src="<?php echo Zend_Controller_Front::getInstance()->getBaseUrl();?>/images/crystal_project/16x16/actions/editdelete.png" 
	            		 alt="<?php echo $this->escape($this->translate('Remove %s', $image->title));?>" 
	            		 onclick="removeDialog(<?php echo $image->id;?>); return false;"
	            		 title="<?php echo $this->escape($this->translate('Remove %s', $image->title));?>" 
	            	/>
		          </div>
		    </div>
            <input id="gallery:::gallery-thumbs:::lightbox-cell:<?php echo $image->id;?>:reorder-index" name="image[]" value="<?php echo $image->id;?>" type="hidden"/>
        </div>
<?php 
        $i++;
    }
}
?>
</div>
</form>
<div id="editDialog" style="display:none;"></div>
<script type="text/javascript">
$("#editDialog").dialog({width: 620, autoOpen: false});
function editDialog(id) {
	$("#editDialog").load("<?php echo $this->url ( array ('module' => 'content', 'controller' => 'node', 'action' => 'edit', 'format' => 'html'), 'default', true );?>/id/" + id);
	$("#editDialog").dialog('open');
}

function removeDialog(id) {
	$("#editDialog").load("<?php echo $this->url ( array('module' => 'gallery', 'controller' => 'gallery', 'action' => 'remove'), 'default', true );?>/id/" + id);
	$("#editDialog").dialog('option', 'buttons', { "Cancel": function() { $(this).dialog("close"); },
												   "Remove": function() { removeAction(id); $(this).dialog("close"); }
												    } );
	$("#editDialog").dialog('open');
}

function removeAction(id) {
	$.ajax({
        type: "POST",
        url: "<?php echo $this->url(array('module' => 'gallery', 'controller' => 'gallery', 'action' => 'remove', 'id' => $this->item->id), 'default', true);?>/image/" + id, 
        complete: function (data, ajaxStatus) {
            // Handle success or failure by being nice to the user.
			alert(data.responseText);
			var str = "#gallery:::gallery-thumbs:::image:" + id;
			var bleb = $(str);
			console.log(bleb);
			bleb.remove();
        }
    });
}

function submitForm(form_ele) {
	request = $(form_ele).serialize();
	$.ajax({
        type: "POST",
        url: form_ele.action, 
        data: request, 
        complete: function (data, ajaxStatus) {
            // Handle success or failure by being nice to the user.
        }
    });
}

var afterMoveListener = function (movedItem, position, allItems) {
	if (typeof movedItem.children != 'function') {
		var movedItem = $(movedItem);
	}
	var movedId = movedItem.children("input").attr("value");
    // POST it back to the server.
    postOrder(movedId, position);
};

//Serialize the form and post it back to the server.
var postOrder = function (movedId, position) {
    var form = $("#reorderform"); // Get the form out of the DOM
    var request = "movedId=" + movedId + "&position=" + position.position + "&target=" + position.element.id;
    // Send it back to the server via an AJAX POST request.
    $.ajax({
        type: "POST",
        url: document.getElementById('reorderform').action, 
        data: request, 
        complete: function (data, ajaxStatus) {
            // Handle success or failure by being nice to the user.
        }
    });
};

var reorderer = fluid.reorderImages(".flc-imageReorderer", {
    selectors: {
        movables: ".content-item"
    },
    listeners: {
        afterMove: afterMoveListener
    }
}); 
</script>